<template>
  <view class="user-list">
    <!-- 空状态 -->
    <view v-if="recommendList.length === 0 && !loading" class="empty-state">
      <u-icon name="user-add" size="60" color="#ccc"/>
      <text class="empty-text">暂无推荐的好友</text>
    </view>

    <!-- 加载状态 -->
    <view v-else-if="loading" class="loading-state">
      <u-loading-icon mode="flower" color="#36BFFA" size="40"/>
      <text class="loading-text">加载中...</text>
    </view>

    <!-- 列表内容 -->
    <view v-else class="list-content">
      <view v-for="user in recommendList" :key="user.userId" class="user-card">
        <UserListItem
            :user="user"
            :listType="'recommend'"
            @follow="handleFollow"
            @unfollow="handleUnfollow"
        />
      </view>

      <!-- 加载更多 -->
      <view v-if="hasMore" class="load-more">
        <u-loading-icon mode="flower" color="#36BFFA" size="30"/>
        <text class="load-more-text">加载更多...</text>
      </view>

      <!-- 没有更多 -->
      <view v-else-if="recommendList.length > 0 && !hasMore" class="no-more">
        <text>—— 没有更多了 ——</text>
      </view>
    </view>
  </view>
</template>

<script setup>
import {ref, onMounted, watch} from 'vue';
import UserListItem from '@/components/UserListItem/UserListItem.vue';
import {getRecommendFriendList} from '../../apis/userSocialAPI';

// 数据状态
const recommendList = ref([]);
const loading = ref(false);
const hasMore = ref(true);
const userId = ref('');

// 获取当前用户ID
userId.value = uni.getStorageSync('userInfo').userId;

onMounted(() => {
  loadRecommendList();
});

// 加载推荐好友列表
const loadRecommendList = async () => {
  if (loading.value || !hasMore.value) return;

  loading.value = true;

  try {
    const res = await getRecommendFriendList(userId.value);

    if (res.statusCode === 200 && res.data.code === 200) {
      recommendList.value = res.data.data;
	  hasMore.value = false;
	  console.log('推荐好友列表获取成功:', recommendList.value);
    } else {
      console.error('获取推荐好友列表失败:', res);
      throw new Error('获取推荐好友列表失败');
    }
  } catch (error) {
    uni.showToast({
      title: '加载失败，请重试',
      icon: 'none'
    });
  } finally {
    loading.value = false;
  }
};

// 关注用户
const handleFollow = (targetUserId) => {
  // 模拟关注API请求
  simulateFollowApi(targetUserId).then(() => {
    // 从列表中移除
    recommendList.value = recommendList.value.filter(user => user.userId !== targetUserId);
    uni.showToast({
      title: '关注成功',
      icon: 'none'
    });
  });
};

// 取消关注
const handleUnfollow = (targetUserId) => {
  // 这里在发现好友页面，取消关注暂不处理
  console.log('在发现好友页面，取消关注暂不处理');
};

// 模拟关注API
const simulateFollowApi = (userId) => {
  return new Promise((resolve) => {
    setTimeout(() => resolve(), 500);
  });
};
</script>

<style lang="scss" scoped>
.user-list {
  padding: 10rpx;

  .empty-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 600rpx;
    color: #999;

    .empty-text {
      margin-top: 20rpx;
      margin-bottom: 10rpx;
      font-size: 26rpx;
    }
  }

  .loading-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100rpx;
    color: #999;

    .loading-text {
      margin-top: 10rpx;
      font-size: 24rpx;
    }
  }

  .list-content {
    .user-card {
      margin-bottom: 15rpx;
    }

    .load-more, .no-more {
      display: flex;
      flex-direction: column;
      justify-content: center;
      align-items: center;
      padding: 20rpx 0;
      color: #999;
      font-size: 24rpx;
    }

    .load-more-text {
      margin-left: 10rpx;
    }
  }
}
</style>